<template>
	<view class="my_box">
		<view class="bag_top">

		</view>
		<view class="zhong_box">
			<!-- @click="chooseImage" -->
			<image class="touxiang_img" src="../../static/touxiang.png" mode="scaleToFill"></image>
			<view class="yh_text_box">
				<view class="name">
					{{wx_name}}
				</view>
				<view class="rh_zh">
					<view class="zuo">
						锐行账号：
					</view>
					<view class="you">
						{{mobile}}
					</view>
				</view>
				<!-- 	<view class="cy_zh" >
					<view class="zuo">
						成员账号：
					</view>
					<view class="you">
						8888888888
					</view>
				</view> -->
			</view>
			<!--  -->
			<view class="mf_text">
				<image class="mf_img" src="../../static/32.png" mode="scaleToFill"></image> 免费版
			</view>
			<button class="sign_in" @click="jumpPage('/packages/signIn/index')"><image src="http://lottery.yywlcm.com/upload/h5/home/2.png"></image>每日签到</button>
			
			<!--  -->
			<view class="bunn_box">
				<!-- <view class="zuo">
					<image class="zuo_img" src="../../static/18.png" mode="scaleToFill"></image>
					<view class="text">
						加盟锐行
					</view>
				</view> -->
				<!-- <view class="you" @click="wx_login">
					<image class="zuo_img" src="../../static/19.png" mode="scaleToFill"></image>
					<view class="text">
						切换账号
					</view>
				</view> -->
				<winningInfo class='winnbox' />
			</view>
			<!--  -->
		</view>
		<!--  -->
		<view class="bunnt_box">
			<button class="item" open-type="share" plain style="border: none;">
				<image class="img" src="../../static/33.png" mode="scaleToFill"></image>
				<view class="text">
					红包余额
				</view>
			</button>
			<button class="item" open-type="share" plain style="border: none;">
				<image class="img" src="../../static/20.png" mode="scaleToFill"></image>
				<view class="text">
					推荐好友
				</view>
			</button>

			<button class="item" plain style="border: none;" @click="xh_click">
				<image class="img" src="../../static/21.png" mode="scaleToFill"></image>
				<view class="text">
					核销奖品
				</view>
			</button>

			<button class="item" plain style="border: none;" @click="bzzxfn1">
				<image class="img" src="../../static/23.png" mode="scaleToFill"></image>
				<view class="text">
					帮助中心
				</view>
			</button>

			<!-- 	<view class="item" @click="gnlist" v-if="false">
				<image class="img" style="background: linear-gradient(138deg, #52FFEB 0%, #97FDCE 100%);"
					src="../../static/22.png" mode="scaleToFill"></image>
				<view class="text">
					功能列表
				</view>
			</view> -->
		</view>
		<!--  -->
		<view class="tanchu_box" v-if="tanchu_true">
			<view class="bunt_top" @click="del_yr_hei">
				退出登录
			</view>
			<view class="bunt_dibu" @click="quxxiao_bunt">
				取消
			</view>
		</view>
		<!--  -->
		<view class="pc_login" @click="pc_login">
			登录电脑版
		</view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="确定" title="退出登录" content="您确定要退出登录吗？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	import winningInfo from './winningInfo';
	export default {
		components: {
			winningInfo
		}, 
		onShow() {
			console.log("我的");
			// let token = uni.getStorageSync('wx_user_token');
			// if (!token) {
			// 	console.log("我的页面");
			// 	uni.navigateTo({
			// 		url: '/packages/wxlogin/wxlogin'
			// 	});
			// }
			this.tanchu_true = false

			this.getUserInfo()

			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},

		data() {
			return {
				tanchu_true: false,
				yhxx_z_list: null,
				tou_img: null, //获取后台头像
				wx_name: "微信用户",
				mobile: "",
				ym: "https://lottery.yywlcm.com",
				fx_true: false,
			};
		},
		// 监听用户点击右上角菜单的「转发」按钮时触发的事件
		onShareAppMessage() {
			// 设置转发的参数
			return {
				title: '天天幸运站',
				path: 'pages/home/home',
				imageUrl: '../../static/31.png',
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '天天幸运站',
				path: 'pages/home/home',
				type: 0,
				summary: "",
			}
		},
		onLoad() {
			// this.getUserInfo()
		},
		methods: {
			bag_true() {
				this.fx_true = false
			},
			getUserInfo() {
				uni.$http.get('/user/getUserInfo').then(yhxx => {
					console.log(yhxx.data.data, "用户信息");
					let res = yhxx.data.data
					this.yhxx_z_list = res
					console.log(`${this.ym}/${ res.photo}`, "图片");
					this.tou_img = res.photo
					this.wx_name = res.user_nickname
					this.mobile = res.mobile
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths //图片临时数组
						console.log(tempFilePaths)
						uni.uploadFile({
							//请求的url接口地址
							url: 'http://121.43.50.8:2306/user/user/uploadPhoto',
							formData: {
								//请求中接口额外的参数
								id: '1385048044696801281'
							},
							fileType: 'image', //图片类型
							filePath: tempFilePaths[0], //哪张图片
							name: 'file', //对应接口的文件名称
							header: { //请求头
								'XX-Device-Type': 'web',
								'XX-Token': uni.getStorageSync('wx_user_token'),
							},
							success: (res) => {
								//成功的回调
								//一般用于重新获取数据渲染页面

								console.log(JSON.parse(res.data).data, "成功的回调")

								uni.$http.post('/user/editPhoto', {
									photo: JSON.parse(res.data).data
								}).then(
									authRes => {
										console.log(authRes, "图片地址");
									})

								this.getUserInfo()
							},
							fail: (err) => {

								//失败的回调
								console.log(err)
							}
						})


					}
				})
			},
			bzzxfn1() {
				uni.navigateTo({
					url: '/packages/Help/Help'
				});
			},
			jumpPage(url) {
				uni.navigateTo({ url });
			},
			// 功能列表
			gnlist() {
				uni.navigateTo({
					url: '/packages/listyemian/listyemian'
				});
			},
			// 分享
			fx_fn1() {
				this.fx_true = true
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});

			},
			xh_click() {
				uni.navigateTo({
					url: '/packages/writeoffmanagement/writeoffmanagement'
				});
			},
			pc_login() {
				uni.navigateTo({
					url: '/packages/pclogin/pclogin'
				});
			},
			// 确定   退出登录
			dialogConfirm() {
				this.tanchu_true = false
				uni.removeStorageSync('wx_user_token');

				uni.$http.get('/user/logout').then(yhxx => {

				})

				// uni.navigateTo({
				// 	url: '/packages/wxlogin/wxlogin'
				// });
			},
			// 取消
			dialogClose() {
				this.tanchu_true = false
			},
			del_yr_hei() {
				this.$refs.alertDialog.open()
			},
			quxxiao_bunt() {
				this.tanchu_true = false
			},
			wx_login() {
				this.tanchu_true = true
			},
		}

	}
</script>

<style lang="scss">
	.my_box {
		position: relative;
		min-height: 100vh;
		// background-color: #EAF2FB;
		background-image: url('https://lottery.yywlcm.com/upload/template/photo/wx_bg.png');
		background-size: 100% 100%;

		.popup_box {
			position: fixed;
			/* Positioned relative to the viewport - not scrolled */
			top: 0;
			/* From the top */
			right: 0;
			/* From the right */
			bottom: 0;
			/* From the bottom */
			left: 0;
			/* From the left */
			background: rgba(0, 0, 0, 0.5);
			/* Black background with 0.5 opacity */
			z-index: 9999;

			.fx_img {
				position: absolute;
				top: 0;
				right: 15%;
				width: 140px;
				height: 115px;
			}
		}


		.tanchu_box {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 250rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 14rpx 14rpx 0rpx 0rpx;
			z-index: 10;
			padding-top: 70rpx;

			.bunt_top {
				width: 100%;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.bunt_dibu {
				width: 100%;
				padding: 20rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #76B9FE;
				color: #ffffff;
			}
		}


		.bag_top {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 200rpx;
			background-color: #EAF2FB;
		}

		.pc_login {
			padding: 15rpx 45rpx;
			position: absolute;
			left: 50%;
			bottom: 10%;
			transform: translateX(-50%);
			background: #FFFFFF;
			border-radius: 33rpx 33rpx 33rpx 33rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;

			border: 2rpx solid #707070;
		}

		.bunnt_box {
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translateX(-50%);
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			width: 90%;
			// height: auto;
			height: 120rpx;
			z-index: 10;
			display: flex;
			padding-top: 36rpx;
			padding-bottom: 36rpx;

			.item {
				flex: 1;
				height: 100%;
				position: relative;

				.img {
					position: absolute;
					top: 10%;
					left: 50%;
					transform: translateX(-50%);
					width: 55rpx;
					height: 55rpx;
					padding: 10rpx;
					border-radius: 22rpx 22rpx 22rpx 22rpx;
				}


				.text {
					min-width: 130rpx;
					// height: 60rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					position: absolute;
					top: 60%;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.zhong_box {
			position: absolute;
			top: 8%;
			left: 50%;
			transform: translateX(-50%);
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			width: 90%;
			height: 400rpx;
			// height: 480rpx;
			z-index: 10;

			.bunn_box {
				position: absolute;
				width: 100%;
				height: 130rpx;
				bottom: 0;
				left: 0;
				// background-color: #76B9FE;
				border-radius: 0 0 42rpx 42rpx;
				display: flex;
				border-top: 2rpx solid #C7C7C7;
				// .zuo {
				// 	flex: 1;
				// 	height: 100%;
				// 	display: flex;
				// 	justify-content: center;
				// 	align-items: center;
				// 	border-right: 2rpx dashed #707070;

				// 	.zuo_img {
				// 		width: 40rpx;
				// 		height: 40rpx;
				// 	}

				// 	.text {
				// 		font-size: 32rpx;
				// 		font-family: PingFang SC-Medium, PingFang SC;
				// 		font-weight: 500;
				// 		color: #FFFFFF;
				// 		margin-left: 10rpx;
				// 	}
				// }

				.you {
					flex: 1;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;


					.zuo_img {
						width: 40rpx;
						height: 40rpx;
					}

					.text {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #000000;
						margin-left: 10rpx;
					}
				}
			}
			// .win_info {
			// 	position: absolute;
			// 	top: 230rpx;
   //  			width: 100%;
			// }
			.winnbox{
				width: 100%;
			}
			.sign_in {
				font-size: 26rpx;
				position: absolute;
				top: 2%;
				right: 2%;
				line-height: 50rpx;
				border-radius: 50rpx;
				color: #2B91FC;
				border: 1px solid #2B91FC;
				image {
					width: 35rpx;
					height: 35rpx;
					vertical-align: middle;
					margin-right: 10rpx;
					position: relative;
					top: -5rpx;
				}
			}
			.mf_text {
				position: absolute;
				right: 0;
				top: -35px;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				background: linear-gradient(88deg, #FFFFFF 0%, #CEEBFC 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding: 10rpx 20rpx;

				.mf_img {
					position: absolute;
					left: -40rpx;
					top: 0rpx;
					width: 46rpx;
					height: 30px;
				}
			}


			.touxiang_img {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				position: absolute;
				top: -75rpx;
				left: 60rpx;
			}

			.yh_text_box {
				width: 70%;
				height: 100rpx;
				position: absolute;
				top: 120rpx;
				left: 50rpx;

				.name {
					font-size: 36rpx;
					font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
					font-weight: 500;
					color: #000000;
				}

				.rh_zh {
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #868686;
					margin-top: 20rpx;
					display: flex;
					font-size: 28rpx;

					.zuo {
						width: 30%;
					}

					.you {
						width: 70%;
					}
				}

				.cy_zh {
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					display: flex;
					font-size: 28rpx;

					.zuo {
						width: 30%;
					}

					.you {
						width: 70%;
					}
				}
			}
		}
	}
</style>